<style>
    @import './luggage.less';
</style>
<template>
    <div>
        <!-- 查询条件 -->
        <Row>
            <Form ref="searchForm" :model="searchForm" inline class="search-form">
                <FormItem>
                    <Input type="text" v-model="searchForm.memberName" clearable placeholder="输入姓名"
                    style="width: 80px"/>
                </FormItem>
                <FormItem>
                    <Input type="text" v-model="searchForm.certificateNumber" clearable placeholder="输入证件号"
                    style="width: 80px"/>
                </FormItem>
                <FormItem>
                    <Input type="text" v-model="searchForm.memberPhone" clearable placeholder="输入手机号"
                    style="width: 80px"/>
                </FormItem>

                <FormItem>
                    <Button type="primary" @click="handleSubmit">搜索</Button>
                </FormItem>
            </Form>
        </Row>
         <!-- 旅客列表 -->
        <Row>
            <Table  border :columns="columns" :data="data" @on-row-click='getTrip'></Table>
            <!-- 旅客列表分页 -->
            <Row type="flex" justify="end" class="page">
                <Page :current="searchForm.pageNum" :total="total" :page-size="searchForm.pageSize"
                @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                size="small" show-total show-elevator show-sizer></Page>
            </Row>
        </Row>
        <!-- 行程、行李列表抽屉 -->
        <Drawer title="行程、行李列表" placement="right" v-model="chooseItem" width="40%" >
            <!-- 分割线Divider -->
            <Divider orientation="left" style="margin-top:30px;color:#aaa">旅客行程</Divider>
            <!-- 行程列表 -->
            <Row>
                <Table :loading="detailLoading" border :columns="tripColumns" :data="tripData" sortable="custom"
                ref="table" @on-row-click='getTripLuggage' ></Table>
            </Row>
            <Divider orientation="left" style="margin-top:30px;color:#aaa" v-if="showLuggage">行李列表</Divider>
            <!-- 行李列表 -->
            <Row  v-if="showLuggage">
                <Table :loading="detailLoading" border :columns="luggageColumns" :data="luggageData"
                sortable="custom" ref="table" ></Table>
            </Row>
        </Drawer>
    </div>
</template>
<script>
import vm from './luggage.js'
export default vm
</script>
